<template>
	<scroll-view class="house-list">
		<view class="list-item" v-for="item in houseList" @click="goDetail(item._id)">
			<image class="item-image" :src="item.image" mode=""></image>
			<view class="house-info">
				<view class="">
					{{item.title}}
				</view>
				<view class="">
					位置：{{item.position}} 经度:{{item.longitude}} 维度:{{item.latitude}}
				</view>
				<view class="">
					户型：{{item.type}}
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {onReachBottom, onPullDownRefresh} from '@dcloudio/uni-app'

	const houseList = ref([])
	const pageData = reactive({
		pageNum: 1,
		pageSize: 10,
		total: 0,
		isNextPage: true
	})
	const getData = () => {
		uniCloud.callFunction({
			name: 'getList',
			data: {
				pageNum: pageData.pageNum,
				pageSize: pageData.pageSize
			},
			success(res) {
				uni.stopPullDownRefresh()
				console.log(res)
				houseList.value = [...houseList.value, ...res.result.data]
				pageData.total = res.result.total
				const totalNum = Math.ceil(pageData.total/pageData.pageSize)
				if(pageData.pageNum < totalNum) {
					// 有下一页
					pageData.isNextPage = true
				} else {
					// 没有下一页
					pageData.isNextPage = false
				}
			}
		})
	}
	getData()
	// 监听页面滚动到底部的事件
	onReachBottom(() => {
		if(pageData.isNextPage) {
			pageData.pageNum += 1
			getData()
		}
	})
	// 监听页面下拉
	onPullDownRefresh(() => {
		pageData.pageNum = 1
		houseList.value = []
		getData()
	})
	const goDetail = (id) => {
		uni.navigateTo({
			url: '/pages/detail/detail?id=' + id
		})
	}
	
</script>

<style lang="scss" scoped>
	.list-item {
		display: flex;
		margin-bottom: 20rpx;

		.item-image {
			width: 200rpx;
			height: 200rpx;
			flex-shrink: 0;
		}
	}
</style>